<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">我的班级</block>
		</cu-custom>
		<view class="imgbox">
			<image class="img" :src="url" mode="aspectFill"></image>
		</view>
		<view class="avatar">
			<view>
				<view class="cu-avatar lg  margin-left "><text style="font-size: 28rpx;">南职大</text> </view>
			</view>
			<view>
				<view class="pad_one">
					<text class="word margin-left">{{class_name}}</text>
				</view>
				<view class="word_two margin-left">
					<view style="display: flex;">
						<view></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 老师列表 -->
		<view class="box_a">
			<view class="msg_one">
				<view class="line"></view>


				<view class="word_four" v-if="teacher_name!=null">老师列表(1)</view>
				<view class="word_four" v-if="teacher_name ==null">老师列表(0)</view>
			</view>
			<view class=" msg_two" v-if="teacher_name!=null">
				<view class="word_six" style="margin-left: 30rpx;">
					<view style="padding-bottom: 20rpx;">
						<view class="pad_seven">
							<view class="dot">{{teacher_name[0]}}</view>
						</view>
						<view class="word_five">{{teacher_name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box_a">
			<view class="msg_one" style="padding-top: 36rpx;">
				<view class="line"></view>
				<view class="word_four">学生列表({{information.length}})</view>
			</view>
			<view class=" msg_two">
				<view class="word_six" style="margin-left: 30rpx;" v-for="(item,index) in information" :key='index'>
					<view class="pad_seven">
						<image class="dot" :src="item.user.avatar"></image>
					</view>
					<view class="word_five">{{item.user.real_name || item.user.nickname}}</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="cu-bar tabbar bg-white foot">
			<button class="submit_but" data-type="student" open-type="share">邀请学生加入</button>
			<button class="submit_but" data-type="teacher" open-type="share">邀请老师加入</button>
		</view>
	</view>
	</view>
	</view>
</template>

<script>
	const {
		appLogin,
		httpGet,
		httpPost
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
				url_a: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
				class_id: 0,
				join_token: '',
				teachjoin_token:'',
				class_name:'南昌职业大学',
				teachlist:[],
				nickname:'',
				real_name:'',
				teacher_name:'',
				// student:'',
				information:[],
			}
		},
		onLoad(option) {
			appLogin((user_info) => {
				this.nickname = user_info.nickname
				this.real_name = user_info.real_name
				if(this.real_name !== null){
					this.real_name = user_info.real_name
				}
				else{
					this.real_name = user_info.nickname
				}
				this.nickname = user_info.nickname
				this.class_id = option.class_id
				if (!this.class_id) {
					uni.showToast({
						icon: "none",
						title: "访问错误"
					})
					return setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}

				this.getClassInfo()
				this.getjoin()
				// this.getteachInfo()
				this.getteachjoin()
			})
		},
		onShareAppMessage(res) {
			if(res.target.dataset.type == 'student'){
				return {
					title: '快来和我一起加入'+this.class_name + '这个班级吧',
					path: '/pages/student/visitors/visitors?join_token=' +this.join_token
				}
			}
			else if(res.target.dataset.type == 'teacher'){
				console.log('/pages/student/visitors/visitors?teachjoin_token=' +this.teachjoin_token)
				return {
					title: this.real_name + '邀请一起加入'+this.class_name + '这个班级吧',
					path: '/pages/school/jointeacher?teachjoin_token='+this.teachjoin_token
				}
			}
		},
		methods: {
			// 请求学生加入的token
			getjoin(){
				httpGet({
					url:"/api/school/student_join_token",
					data:{
						class_id:this.class_id,
					},
					
				}).then((res) => {
					this.join_token = res.result.join_token
				})
			},
			// 老师加入的token
			getteachjoin(){
				httpGet({
					url:"/api/school/teacher_join_token",
					data:{
						class_id:this.class_id,
						
					},
					
				}).then((res) => {
					console.log('老师加入token')
					this.teachjoin_token = res.result.join_token
					
				})
			},
			//获取学生列表信息
			getClassInfo() {
				httpGet({
					url: "/api/school/class_info",
					data: {
						class_id: this.class_id
					}
				}).then(res => {
					console.log(res)
					this.class_name = res.result.class_name
					// 学生信息
					this.information = res.result.students
					this.teachlist = res.result.teacher
					// this.real_name = res.result.students[0].user.real_name
					// console.log(this.real_name)
					this.teacher_name = res.result.teacher
				})
			},
			// 获取老师列表
			// getteachInfo(){
			// 	httpGet({
			// 		url: "/api/school/teacher_list",
			// 		data: {
			// 			class_id: this.class_id
			// 		}
			// 	}).then(res => {
			// 		this.teachlist = res.result.list
					
			// 		console.log('老师信息')
			// 		console.log(res)
			// 	})
			// }
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.box_a {
		height: ;
	}

	.pad {
		margin-left: 20rpx;
	}

	.pad_one {
		margin-top: 20rpx;
	}

	.pad_two {
		margin-left: 32rpx;
	}

	.pad_four {
		margin-top: 23rpx;
	}

	.pad_five {
		margin-left: 32rpx;
	}

	.pad_seven {
		/* height: 107rpx;
		width: 107rpx; */
	}

	.margin-left {
		margin-left: 55rpx;
	}

	.img {
		width: 750rpx;
		height: 280rpx;

	}

	.dot {
		line-height: 50rpx;
		color: #FFFFFF;
		background-color: #007AFF;
		line-height: 102rpx;
		width: 102rpx;
		height: 102rpx;
		border-radius: 50%;
		text-align: center;
		/* background-color: rgb(59, 115, 246); */
	}

	.msg_one {
		margin-top: 18rpx;
		padding-left: 30rpx;
		display: flex;
	}

	.msg_two {
		height: 100%;
		padding-top: 55rpx;
		padding-left: 26rpx;
		flex-flow: row wrap;
		display: flex;
	}

	.msg_three {
		height: 100%;
		padding-left: 26rpx;
		padding-top: 50rpx;
	}

	.word {
		font-weight: 550;
		font-size: 36rpx;
	}

	.word_two {
		border-bottom: 4rpx rgba(0, 0, 0, 0.5);
		margin-top: 24rpx;
		font-size: 26rpx;
		color: rgb(112, 112, 112);
	}

	.word_four {
		font-size: 32rpx;
		margin-left: 18rpx;
	}

	.word_five {
		width: 107rpx;
		text-align: center;
		padding-top: 15rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		
	}

	.word_six {
		width: 107rpx;
		height: 170rpx;
	}

	.cu-avatar {
		width: 106rpx;
		height: 106rpx;
		background-color: rgb(11, 162, 154);
		border-radius: 10rpx;
		font-size: 14rpx;
		margin-top: -62rpx;
	}

	.avatar {
		border-bottom: 12rpx solid rgba(249, 249, 249, 0.8);
		height: 200rpx;
		background-color: #FFFFFF;
	}

	.line {
		margin-top: 4rpx;
		padding-top: 36rpx;
		border-radius: 2500rpx;
		height: 28rpx;
		width: 8rpx;
		background-color: #3b73f6;

	}

	.cancel_but {
		border-radius: 90rpx;
		border-width: 1rpx;
		border-style: solid;
		border-color: #3b73f6;
		text-align: center;
		height: 80rpx;
		width: 335rpx;
		line-height: 80rpx;
		color: #3b73f6;
		font-size: 30rpx;
	}
	.submit_but {
		border-radius: 90rpx;
		border-width: 1rpx;
		border-style: solid;
		background-color: #3b73f6;
		text-align: center;
		height: 80rpx;
		width: 335rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	
</style>
